import { Component, OnInit } from "@angular/core";
import { HEROES } from "../mock-heroes";
import { Hero } from "../hero";
import { HeroService } from "../hero.service";
@Component({
  selector: "app-heroes",
  templateUrl: "./heroes.component.html",
  styleUrls: ["./heroes.component.css"]
})
export class HeroesComponent implements OnInit {
  // hero: Hero ={
  //   id:1,
  //   name:'Windstorm'
  // };

  heroes: Hero[];

  // selectedHero: Hero;

  constructor(private heroService: HeroService) {}

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    // this.heroes = this.heroService.getHeroes();
    // this.heroService.getHeroes()
    // .subscribe(heroes=>this.heroes = heroes.slice(1,5));
    this.heroService.getHeroes().subscribe(heroes => (this.heroes = heroes));
  }

  // onSelect(hero: Hero): void {
  //   this.selectedHero = hero;
  // }

  add(name: string): void {
    name = name.trim();
    if (!name) {
      return;
    }
    this.heroService.addHero({name} as Hero).subscribe(hero => {
      this.heroes.push(hero);
    });
  }
  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }
}
